import { Button } from "../widgets/button.slint";
import { Styles } from "../widgets/styles.slint";

export component ButtonIndicator inherits Button {
    in property <bool> active: false;

    Rectangle {
        background: Styles.palette.primary-bg;
        border-radius: 2px;
        width: 4px;
        height: root.active ? (root.hover ? parent.height / 3 * 2 : parent.height / 2) : 0;
        animate height {
            duration: Styles.durations.short;
            easing: ease-out;
        }
        x: 4px;
        y: (parent.height - self.height) / 2;
    }

    font-weight: active ? 700 : 400;
}
